<template>
  <div class="contentbox">
    <!-- 头部导航 -->
    <div class="top-nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tablist"
          :label="item.label"
          :name="item.name"
          :key="index"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 子路由占位 -->
    <router-view></router-view>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      activeName: "/recomend/rtstyle",
      tablist: [
        { label: "个性推荐", name: "/recomend/rtstyle" },
        { label: "歌单", name: "/recomend/songlist" },
        { label: "主播电台", name: "/recomend/anchorradio" },
        { label: "排行榜", name: "/recomend/ranklist" },
        { label: "歌手", name: "/recomend/singer" },
        { label: "最新音乐", name: "/recomend/latestmusic" },
      ],
    };
  },
  mounted(){
    var currentRouter = sessionStorage.getItem('selectItem');
    this.activeName = currentRouter || "/recomend/rtstyle";
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.name);
      this.$router.push(tab.name);
      sessionStorage.setItem("selectItem",tab.name)
    },
  },
};
</script>
    
<style scoped lang='less'>
.contentbox {
  padding: 0 80px;
  height: 100%;
  /* padding-bottom: 60px; */
  .top-nav {
    width: 36%;
    height: 40px;
    margin: 0 auto;
  }
}
</style>